<template>
	<view>
		<u-popup :border-radius="40" class="xf-select" :height="'45%'" mode="bottom" v-model="showPopup" @close="close"
			:mask-close-able="false" :mask="true">
			<view class="selBody pT25">
				<scroll-view scroll-y="true" class="scrollBox">
					<view class="flex jst-between mL25 mR25 sortItem" @click="checkType(item,i)" v-for="(item,i) in sortLis" :key="i">
						<view class="w60" :class="item.checked?'checked':''">{{item.text}}</view>
						<image v-show="item.checked" class="selImg" src="/static/image/userImg/sel.png" mode=""></image>
					</view>
				</scroll-view>
				<view class="selBtnBox flex jst-between alg-center mL15 mR15">
					<view class="resetBtn w40" @click="resetBtn">重置</view>
					<view class="confirmBtn w50" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				showPopup: false,
				sortLis: [],
				currentCheckSort:'',
			}
		},
		async mounted() {
			let sort= await this.baseStore.getDictionaryDataAll('jjp_oddjob_orderBy');
			this.sortLis=sort.map(v=>{return {...v,checked:false}});
		},
		methods: {
			openPoup() {
				this.showPopup = true;
			},
			close() {
				this.showPopup = false;
			},
			resetBtn() {
				this.currentCheckSort="";
				this.sortLis.map((item, index) => {
					item.checked =  false
				})
				
			},
			sureBtn() {
				this.$emit('updateSelV',{type:'sort',value:this.currentCheckSort})
				this.close()
			},
			checkType(v, i) {
				this.currentCheckSort=v.value;
				this.sortLis.map((item, index) => {
					item.checked = index === i ? true : false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selBody {
		background: #fff;
		position: relative;
		height: calc(100% - 50rpx);
	}

	.sortItem {
		font-size: 28rpx;
        color:#333333;
		margin-top: 40rpx;
		.checked {
			color: #3291F8;
		}
	}

	.scrollBox {
		height: calc(100% - 160rpx);
	}

	.selBtnBox {
		position: absolute;
		left: 0;
		bottom: 0;
		width: calc(100% - 60rpx);
	}
	.selImg{
		width: 32rpx;
		height: 32rpx;
	}
</style>